<script setup lang="ts">
import { ref } from 'vue';

import { Icon } from '@/components/core/icon';

defineOptions({
  name: 'Screen',
});

const { error, text } = defineProps({
  error: {
    default: false,
    type: Boolean,
  },
  text: {
    default: '',
    type: String,
  },
});
const emits = defineEmits(['history']);
const history = ref(false);
</script>

<template>
  <div
    class="relative flex items-center justify-end rounded-lg bg-gray-800 px-5"
  >
    <div class="absolute bottom-3 left-3 cursor-pointer" title="历史记录">
      <Icon
        class="text-gray-600 hover:text-gray-200"
        icon="mdi:history"
        @click="
          history = !history;
          emits('history', history);
        "
      />
    </div>

    <div class="overflow-hidden text-right">
      <span
        v-if="!error"
        class="float-right whitespace-pre pr-5 text-xl"
        data-test="text"
      >
        {{ text }}
      </span>
      <span
        v-else
        class="float-right whitespace-nowrap pr-5 text-red-400"
        data-test="error"
      >
        Invalid expression
      </span>
    </div>

    <i
      class="absolute bottom-5 right-5 w-4 animate-pulse border-b-4 bg-white"
    ></i>
  </div>
</template>
